 <template>
  <div class="wrap">
    <div class="tishi">
      <span style="font-size: 16px; font-weight: bold">配置活动背景图</span>
      图片大小建议不超过1M；请最少上传一张预览图，最多可上传3张
    </div>
    <el-upload
      :disabled="user == 1 || user == 'y'"
      :class="uploadDisableds"
      :action="httpurl + '/api/fileUpload'"
      list-type="picture-card"
      :limit="3"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :file-list="listImg"
      :on-error="handleFail"
    >
      <span>上传背景图</span>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
    <div class="btnGroup">
      <!-- <el-button type="primary" @click="submit">完成</el-button>
      <el-button @click="result">取消</el-button> -->
    </div>
    <div class="bigger" v-show="isShow">
      <div class="titleCount">
        <div class="sTop">提示</div>
        <p class="cot">提交活动后，活动会实时生效。</p>
        <p class="cot">
          本次促活商户数合计1000个，请下载商户表后分配促活任务。
        </p>
        <el-button type="primary" class="daload">本地下载</el-button>
      </div>
    </div>
    <!-- <button @click="submitVuex">提交到vuex</button> -->
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      uploadDisableds: "",
      httpurl: this.GLOBAL.httpurl,
      isShow: false,
      imgUrl: [],
      dialogImageUrl: "",
      dialogVisible: false,
      //   disabled: false,
      //提交的图片的数据
      imgData: [],
      listImg: [],
      imgUrl2: [],
      user: null,
    };
  },
  created() {
    this.user = this.$route.query.user;
    if (this.user == "1" || this.user == "y") {
      this.uploadDisableds = "disabled";
    }
  },
  mounted() {
    let uid = this.$route.query.uid;
    console.log("下面是会先的图片");
    let userId = this.$route.query.uid;
    console.log(userId);
    if (userId) {
      axios
        .post("/api/active/queryUpdateActive", { activeUid: userId })
        .then((res) => {
          console.log(res);
          let newArr = [];
          let imgUrl = res.data.data.bgPhotos;
          for (let i = 0; i < imgUrl.length; i++) {
            this.imgUrl.push(imgUrl[i].filePath);
            if (this.imgUrl.length > 2) {
              this.uploadDisableds = "disabled";
            }
          }

          this.imgUrl2 = imgUrl;
          for (let i = 0; i < imgUrl.length; i++) {
            newArr.push({ url: imgUrl[i].filePath, id: imgUrl[i].id });
          }
          console.log("下面是");
          console.log(newArr);
          this.listImg = newArr;
        })
        .catch((err) => {
          console.log(err);
        });
    }
  },
  methods: {
    handleFail() {
      layer.open({
        content: "图片上传失败，请重新上传",
        skin: "msg",
        time: 2, //2秒后自动关闭
      });
    },
    handleSuccess(res, file, fileList) {
      console.log(res);
      let imgUrl = res.data.filePath;
      this.imgUrl.push(res.data.filePath);
      if (this.imgUrl.length > 2) {
        this.uploadDisableds = "disabled";
      }
      console.log(this.imgUrl);
    },
    beforeUpload(file) {
      let newName = file.name.substring(file.name.lastIndexOf("."));
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg";
      if (!isJPG) {
        layer.open({
          content: "上传预览图片只能是 jpg、jpeg、png 格式!",
          skin: "msg",
          time: 2,
        });
        return false;
      }
    },
    // beforeUpload(file) {
    //   let newName = file.name.substring(file.name.lastIndexOf("."));
    //   let islt1M = file.size / 1024 / 1024 < 1;
    // //   alert(islt1M)
    //   if (!islt1M) {
    //     this.$notify({
    //       title: "错误",
    //       message: "图片尺寸限制为345：140，大小不可超过1M",
    //       type: "error",
    //     });
    //     return false;
    //   } else {
    //     const isSize = new Promise((resolve, reject) => {
    //       // const width = 345;
    //       // const height = 140;
    //       const _URL = window.URL || window.webkitURL;
    //       const img = new Image();
    //       img.onload = () => {
    //         let name =
    //           file.name.substring(0, file.name.lastIndexOf(".")) +
    //           "_" +
    //           img.width +
    //           "_" +
    //           img.height +
    //           newName;
    //         file = new File([file], name);
    //         const valid = this.$commit.ImageRestrictions(
    //           img.width,
    //           img.height,
    //           1
    //         );
    //         valid ? resolve() : reject();
    //       };
    //       img.src = _URL.createObjectURL(file);
    //     }).then(
    //       () => {
    //         return file;
    //       },
    //       () => {
    //         this.$notify({
    //           title: "错误",
    //           message: "图片尺寸限制为345：140，大小不可超过1M",
    //           type: "error",
    //         });
    //         return Promise.reject();
    //       }
    //     );
    //     return isSize;
    //   }
    // },
    submitVuex() {
      // console.log()
      // this.imgUrl
      let userId = this.$route.query.uid;
      for (var i = 0; i < this.imgUrl.length; i++) {
        this.imgData.push({ filePath: this.imgUrl[i] });
      }
      console.log(this.imgData);
      this.$store.commit("setBingImg", this.imgData);
      console.log("下面是修改的图片");
      console.log(this.$store.state.bigImg);
      // }
    },
    handleRemove(file, fileList) {
      this.uploadDisableds = "";
      let tu = [];
      for (let i = 0; i < fileList.length; i++) {
        tu.push(fileList[i].url);
      }
      this.imgUrl = tu;
      console.log(this.imgUrl);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      // console.log(this.dialogImageUrl)
    },
    //清空shuju
    clearData() {
      this.$store.commit("clearSetActiveRanking");
      this.$store.commit("clearSetBannerData");
      this.$store.commit("clearSetBingImg");
    },
    submit() {
      // this.$message('该功能正在内测升级中，敬请期待');
      console.log("基本信息");
      console.log(this.$store.state.activeRanking);
      console.log("banner图信息");
      console.log(this.$store.state.bannerData);
      console.log("下面是大图信息");
      console.log(this.$store.state.bigImg);
      var data = this.$store.state.activeRanking;
      var uid = this.$route.query.uid;
      if (uid) {
        data.activeUid = this.$route.query.uid;
      }

      console.log(this.$store.state.bigImg);
      if (this.$store.state.bigImg.length == "0") {
        return layer.open({
          content: "banner图不能为空",
          skin: "msg",
          time: 2,
        });
      } else {
        data.bgPhotos = this.$store.state.bigImg;
      }
      if (this.$store.state.bannerData.length == "0") {
        return layer.open({
          content: "背景图不能为空",
          skin: "msg",
          time: 2,
        });
      } else {
        data.coverPhotos = this.$store.state.bannerData;
      }
      data.officeUid = localStorage.getItem("uid");
      console.log(data);
      let type = this.$route.query.type;
      let url = "api/active/" + type;
      axios({
        url:url,
        data,
        method:"post",
        timeout:1000*60*2
      })
        .then((res) => {
          if (res.data.code == "0000") {
            console.log(res);
            this.$router.push("activityManagement");
            this.clearData();
          } else {
            // this.$notify({ title: "错误", message: res.data.msg, type: "error" });
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2,
            });
          }
          this.$parent.quLoading2();
        })
        .catch((err) => {
          console.log(err);
          this.$parent.quLoading();
        });
      //完成以后清空数据
      // setTimeout(() => {
      //   this.$store.commit("clearSetActiveRanking")
      //   this.$store.commit("clearSetBannerData")
      //   this.$store.commit("clearSetBingImg")
      // }, 200);
      return;
      if (this.imgUrl.length >= 1) {
        this.isShow = true;
        return;
      } else {
      }
    },
    result() {
      this.$router.go(-1);
    },
  },
};
</script>
<style rel="stylesheet/scss">
.disabled .el-upload--picture-card {
  display: none;
}
</style>
<style scoped>
.title {
  color: #409eff;
}
.wrap {
  width: 95%;
  margin: 0 auto;
}
/deep/ .el-upload--picture-card {
  width: 345px;
  height: 345px;
  line-height: 345px;
}
/deep/ .el-upload-list__item {
  width: 345px;
  height: 345px;
}
/deep/ .el-upload-list__item {
  margin-right: 40px;
  box-shadow: 0px 2px 22px rgba(0, 0, 0, 0.2);
}
.mainTitle {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 24px;
}
.tishi {
  margin-bottom: 20px;
  font-size: 14px;
  margin-top: 30px;
}

.uoloadSty .el-upload--picture-card {
  width: 110px;
  height: 110px;
  line-height: 110px;
}
.disUoloadSty .el-upload--picture-card {
  display: none; /* 上传按钮隐藏 */
}
.btnGroup {
  margin-top: 60px;
}
/deep/ .el-upload--picture-card {
  border: 0;
  box-shadow: 0px 2px 22px rgba(0, 0, 0, 0.2);
}
.bigger {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 999999999999999999999999999;
  height: 100%;
  background: rgba(117, 129, 150, 0.5);
}
.titleCount {
  width: 400px;
  height: 215px;
  background: white;
  z-index: 9999999999999999999999999999999999999;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  padding: 20px;
}
.sTop {
  font-size: 18px;
  color: #303133;
  margin-bottom: 15px;
}
.cot {
  font-size: 12px;
  color: #303133;
}
.daload {
  margin-left: 130px;
  margin-top: 50px;
}
</style>